<template>
  <el-dialog :model-value="dialogVisible" :title="$t('提现申请')" width="720" center :destroy-on-close="true"
    @close="closeDialog">
    <el-form :model="form" width="50%" label-width="200px" ref="dialogFormRef">
      <el-form-item :label="$t('币种')">
        <el-row class="flex-1">
          <el-col :span="14">
            <el-select v-model="form.currency" :placeholder="$t('请选择币种')" @change="handleCurrency" style="width:250px">
              <el-option v-for="item in currencyList" :key="item.key" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-if="available" :label="$t('余额')">{{ available }}</el-form-item>
      <el-form-item :label="$t('提现金额')">
        <el-input v-model="form.amount" type="number" :placeholder="$t('请输入提现金额')" clearable style="width:250px" />
      </el-form-item>
      <!-- <el-form-item v-if="isShowFeeAmount" :label="$t('手续费')">{{ feeAmount }} {{ form.currency }}
        <el-popover placement="bottom-end" width="auto" trigger="click">
          <template #reference>
            <el-icon class="ml-1" color="#e54c5f" size="16"><QuestionFilled /></el-icon>
          </template>
          <p class="mb-2 text-[#000]" v-html="tips ? tips?.replace(/\n/g, '<br>') : '--' "></p>
        </el-popover>
      </el-form-item> -->
      <el-form-item :label="$t('收款银行账号')">
            <el-select v-model="form.card_id" clearable :placeholder="$t('请选择收款银行账号')"
              style="width: 250px;">
              <el-option v-for="item in cardsList" :key="item.card_id" :label="item.name" :value="item.card_id">
              <div style="font-size:12px;">
                <el-row class="mb-1 text-sm">
                  <el-col :span="6">{{ $t('银行名称') }}</el-col>
                  <el-col :span="18">{{ item.bank }}</el-col>
                </el-row>
                <el-row class="mb-1 text-sm">
                  <el-col :span="6">{{ $t('收款账号') }}</el-col>
                  <el-col :span="18">{{ item.card_number }}</el-col>
                </el-row>
                <el-row class="mb-1 text-sm">
                  <el-col :span="6">{{ $t('收款人名称') }}</el-col>
                  <el-col :span="18">{{ item.card_name }}</el-col>
                </el-row>
                <el-row class="mb-1 text-sm">
                  <el-col :span="6">{{ $t('银行地址') }}</el-col>
                  <el-col :span="18">{{ item.address }}</el-col>
                </el-row>
                <el-row class="mb-1 text-sm">
                  <el-col :span="6">{{ $t('SWIFT码') }}</el-col>
                  <el-col :span="18">{{ item.swift_code }}</el-col>
                </el-row>
                <el-row class="mb-1 text-sm" v-if="item.extended">
                  <el-col :span="6">{{ $t('银行补充信息') }}</el-col>
                  <el-col :span="18">{{ item.extended }}</el-col>
                </el-row>
                </div>
              </el-option>
            </el-select>
            <el-button type="danger" class="ml-2" :icon="Plus" v-btn="['all', 'web_withdraw_manage_cards']"
            @click="emits('handleGoAddCard')">
                {{ $t('添加银行卡') }}
            </el-button>
      </el-form-item>
      <div>
        <p v-for="(bankT, index) in cardsList" :key="index">
        <p v-if="bankT.card_id == form.card_id">
        <el-card class="bank-details" style="margin-left:200px; padding:0">
          <el-row class="mb-1">
            <el-col :span="6">{{ $t('银行名称') }}</el-col>
            <el-col :span="18">{{ bankT.bank }}</el-col>
          </el-row>
          <el-row class="mb-1">
            <el-col :span="6">{{ $t('收款账号') }}</el-col>
            <el-col :span="18">{{ bankT.card_number }}</el-col>
          </el-row>
          <el-row class="mb-1">
            <el-col :span="6">{{ $t('收款人名称') }}</el-col>
            <el-col :span="18">{{ bankT.card_name }}</el-col>
          </el-row>
          <el-row class="mb-1">
            <el-col :span="6">{{ $t('银行地址') }}</el-col>
            <el-col :span="18">{{ bankT.address }}</el-col>
          </el-row>
          <el-row class="mb-1">
            <el-col :span="6">{{ $t('SWIFT码') }}</el-col>
            <el-col :span="18">{{ bankT.swift_code }}</el-col>
          </el-row>
          <el-row class="mb-1" v-if="bankT.extended">
             <el-col :span="12">{{ $t('银行补充信息') }}</el-col>
             <el-col :span="12">{{ bankT.extended }}</el-col>
          </el-row>
        </el-card>
        </p>
        </p>
      </div>
    </el-form>
    <div class="w-full flex mt-5">
      <el-button type="primary" class="w-32" :icon="SuccessFilled" style="margin-left:200px;"
      :disabled="form.currency == '' || form.amount == '' || form.card_id == ''
        " @click="submit(form)">{{ $t("提交") }}</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue";
import { SuccessFilled, Plus } from '@element-plus/icons-vue'
import { getAssetsApi } from "@/api/assetDetails/index";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const form = reactive({
  currency: "",
  amount: "",
  card_id: "",
});
const dialogFormRef = ref("");
const available = ref(""); //可用余额
defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  currencyList: {
    type: Array,
    default: [],
  },
  cardsList: {
    type: Array,
    default: [],
  },
});
const resetForm = reactive({ ...form });
const feeAmount = ref("");
const tips = ref("");
const isShowFeeAmount = ref(false);
const emits = defineEmits(["closeDialog", "submitForm", "handleGoAddCard"]);
const closeDialog = () => {
  Object.assign(form, resetForm);
  available.value = "";
  isShowFeeAmount.value = false;
  emits("closeDialog");
};
// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 20,
  total: 0,
});
// 参数
const param = (currency) => {
  return {
    page: pageable.pageNum,
    currency: currency,
    pagesize: pageable.pageSize,
  };
};
// 币种选择
const handleCurrency = async (value) => {
  const res = await getAssetsApi(param(value));
  if (res.list.length > 0) {
    available.value = res.list[0].available;
    // isShowFeeAmount.value = true
    // feeAmount.value = form.amount * res.list[0].fee_rate + Number(res.list[0].fee) || 0;
    // tips.value = res.list[0].tips || "--";
  } else {
    available.value = 0;
  }
};

const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        if (dialogForm.amount > available.value) {
          ElMessage({
            type: "error",
            message: t("余额不足"),
          });
          return;
        }
        const param = Object.assign({}, dialogForm);
        // console.log(param);
        emits("submitForm", param);
      } catch (error) {
        console.log(error);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>
<style scoped>
/* .el-select-dropdown__item {
  height: auto;
}
.bank-details {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px 0;
  margin-left: 120px;
  font-size: 12px;
  max-width: 600px;
  color: rgb(96, 98, 102);
  margin-left: 180px;
} */
.el-select-dropdown__item {
  height: auto;
}

.bank-details {
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px 0 10px 180px;
  font-size: 12px;
  max-width: 600px;
  color: rgb(96, 98, 102);
}

.mx-5 {
  margin-left: 2.25rem;
}

.el-select-dropdown__item {
  overflow: auto;
  width: 500px;
}
.el-row {
  font-size:12px;
  font-weight:0;
}
.el-col-12 {
  max-width: 40%;
}</style>
